<template>
  <div class="brandDetails">
    <ul>
      <li>
        <div class="top">
          <img
            :src="brandArr.list_pic_url"
            alt=""
            width="100%"
            height="150px"
          />
          <div class="top_title">{{ brandArr.name }}</div>
        </div>
        <div class="footer">
          <p>{{ brandArr.simple_desc }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
 
<script>
import { GetBrandDetailApi } from "../../request/api";
export default {
  data() {
    return {
      brandArr: [],
    };
  },
  created() {
    GetBrandDetailApi({ id: this.$route.params.id }).then((res) => {
      // console.log(res);
      this.brandArr = res.data.brand;
      // console.log(this.brandArr);
    });
  },
};
</script>
 
<style lang = "less" scoped>
.brandDetails {
  background: #efefef;
  .top {
    position: relative;
    width: 100%;
    height: 150px;
    .top_title {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      color: #fff;
      text-decoration: underline;
    }
  }
  .footer {
    font-size: 18px;
    padding: 12px 2%;
    background: #fff;
    color: #666;
    text-align: center;
    P {
      line-height: 22px;
      display: block;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
    }
  }
}
</style>